﻿<template>
    <div class="student">
        <h2>学生信息管理</h2>
        <input type="text" v-model="searchText">
        <button @click="search">查询</button>
        <div class="tankuan" v-if="isshow">
            学生学号：<input type="text" v-model="upData.stuid"><br>
            学生姓名：<input type="text" v-model="upData.stuName"><br>
            学生性别：<input type="text" v-model="upData.stuSex"><br>
            <button @click="submitData(upData)">保存</button>
        </div>
        <table border="1">
            <thead>
            <tr>
                <th>学号</th>
                <th>学生姓名</th>
                <th>学生性别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in dangqianPage" :key="item.stuid">
                <td>{{item.stuid}}</td>
                <td>{{item.stuName}}</td>
                <td>{{item.stuSex}}</td>
                <td>
                    <button @click="remove()">删除</button>
                    <button @click="updata(item)">修改</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="yema">
            <button @click="prevPage">上一页</button>
            <div class="page">
                <span v-for="num in pageNum" @click="changeNum(num)">{{num}}</span>
            </div>
            <button @click="nextPage">下一页</button>
        </div>
    </div>

</template>

<script>
    import * as api from '../utils/api'

    export default {
        name: "Student",
        data(){
            return{
                tableData:[],
                dangqianyema:1,
                isshow:false,
                upData:{
                    stuid:'',
                    stuName:'',
                    stuSex:''
                },
                searchText:'',
                searchData:[]
            }
        },
        computed:{
          dangqianPage(){
              let dangqinaNum=(this.dangqianyema-1)*5
              let dangqinayeData = this.tableData.slice(dangqinaNum,dangqinaNum+5)
              return dangqinayeData
          },
            pageNum(){
                return Math.ceil(this.tableData.length/5)
            }
        },
        created() {
            this.axios({
                url:api.GET_STUDATA,
                params:{stuid:1}
            }).then(data=>{
                console.log(data)
                this.tableData=data.data.data
            }).catch(err=>{

            })
        },
        methods:{
            search(){
                console.log(this.searchText)
                this.tableData.map(item=>{
                    if (item.stuSex===this.searchText||item.stuName===this.searchText||item.stuid===Number(this.searchText)){
                        this.searchData.push(item)
                    }
                    this.tableData=this.searchData
                })
            },
            remove(){

            },
            updata(data){
                console.log(data)
                this.isshow=true
                this.upData=data
            },
            submitData(data){
                //保存数据，将修改的数据传入
                //发起ajax请求，将修改的数据发送给后台
                //并让后端将修改后的数据重新发送
                //将得到数据重新赋值给this.tableData
                alert('修改成功')
                this.isshow=false
            },
            changeNum(page){
                this.dangqianyema=page
            },
            prevPage(){
                if (this.dangqianyema>1){
                    this.dangqianyema--
                }
            },
            nextPage(){
                if (this.dangqianyema<this.pageNum){
                    this.dangqianyema++
                }
            }
        }
    }
</script>

<style scoped>
    .student{
        padding: 0 50px;
    }
    .tankuan{
        position: absolute;
        right: 200px;
        border: 1px solid sandybrown;
        background-color: silver;
        text-align: center;
        padding: 30px;
        line-height: 30px;
    }
    table{
        text-align: left;
        margin: 20px 0;
    }
    table button{
        width: 60px;
        margin-right: 2px;
        background-color: #1fd388;
        border: none;
        padding: 5px 0;
    }
    td,th{
        width: 200px;
        padding: 10px 20px;
    }
    .yema div{
        display: inline-block;
    }
    .page span{
        display: inline-block;
        padding: 5px;
        background-color: cadetblue;
        margin: 0 2px;
    }
</style>